/* eslint-disable react/no-array-index-key */
import React, { Fragment } from 'react';
import cn from 'classnames';
import moment from 'moment';
import PropTypes from 'prop-types';
import { Steps, Icon } from 'antd';
import styles from './Step.less';

const { Step } = Steps;

const dictStatus = {
    1: 'wait',
    2: 'process',
    3: 'error',
    4: 'finish',
    5: 'error',
    6: 'finish',
    restart: 'finish'
};

const FlowStep = ({ data, className, ...rest }) => {
    if (!data || data.length === 0) return null;
    let current = [...data].reverse().findIndex(item => item.status);
    if (current === -1) {
        current = 0;
    } else if (current === 1 && data[data.length - 1 - current].status === 4) {
        // 审批通过
        current = data.length - 1;
    } else {
        current = data.length - 1 - current;
    }
    // const find = data.find(item => item.status);
    // const status = find ? dictStatus[find.status] : 'process';
    return (
        <Steps className={cn(styles.step, className)} direction="vertical" {...rest} current={current}>
            {data.map((item, index) => {
                const users = item.users ? item.users.split('#') : [];
                let description = users.length > 1 ? `${users.join('、')}等${users.length}人` : users;
                if (item.statusName) {
                    description += `(${item.statusName})`;
                }
                if (item.proxys) {
                    description += `（代理人：${item.proxys.split('#').join('、')}）`;
                }
                if (item.autoApprove) {
                    description += '(自动审批)';
                }
                if (item.empPositionMessage) {
                    description = (
                        <Fragment>
                            <div>{`${item.empPositionMessage}`}</div>
                            {description}
                        </Fragment>
                    );
                }
                if (item.autoAgreeMessage) {
                    description = (
                        <Fragment>
                            {description}
                            <div>{`${item.autoAgreeMessage}`}</div>
                        </Fragment>
                    );
                } else if (item.message) {
                    description = (
                        <Fragment>
                            {description}
                            <div>审批意见：{`"${item.message}"`}</div>
                        </Fragment>
                    );
                }

                if (item.commentVos) {
                    description =
                        item.commentVos.length >= 2 ? (
                            <Fragment>
                                {item.commentVos.map(v => {
                                    const { operateUserName, commentTime, message, statusName } = v;
                                    if (operateUserName === '' && message !== '') {
                                        return (
                                            <span>
                                                {message}&nbsp;&nbsp;{commentTime}
                                            </span>
                                        );
                                    }
                                    return (
                                        <div>
                                            {operateUserName}&nbsp;&nbsp;{`(${statusName})`}&nbsp;&nbsp;{commentTime}
                                            &nbsp;&nbsp;
                                            {v.message}
                                        </div>
                                    );
                                })}
                            </Fragment>
                        ) : (
                            <Fragment>
                                {description}
                                {item.commentVos.map(v => (
                                    <div>
                                        {v.message}&nbsp;&nbsp;{v.commentTime}
                                    </div>
                                ))}
                            </Fragment>
                        );
                }
                if (item.commentTime) {
                    description = (
                        <Fragment>
                            {description}
                            <div>{`${moment(item.commentTime).format('YYYY-MM-DD HH:mm:ss')}`}</div>
                        </Fragment>
                    );
                }
                // 接口不规范
                // const status = index === 0 ? 'finish' : dictStatus[item.status] || 'wait';
                return item.status === 6 ? (
                    <Step
                        status={index === 0 ? 'finish' : dictStatus[item.status] || 'wait'}
                        icon={item.status === 6 ? <Icon type="rollback" /> : ''}
                        key={index}
                        title={item.name}
                        description={description}
                    />
                ) : (
                    <Step
                        // status={dictStatus[item.status]}
                        status={index === 0 ? 'finish' : dictStatus[item.status] || 'wait'}
                        key={index}
                        title={item.name}
                        description={description}
                    />
                );
            })}
        </Steps>
    );
};

FlowStep.propTypes = {
    data: PropTypes.array
};

FlowStep.defaultProps = {
    data: []
};

export default FlowStep;
